<script lang="ts" setup>
import { ref } from 'vue'
import { defineEmits } from 'vue'

const visible = ref(false)
// 接收父组件传来的删除事件
const emit = defineEmits(['delete-click'])
// 定制删除动作
const handleDeleteClick = () => {
  visible.value = false
  emit('delete-click')
}
</script>

<template>
  <el-popover :visible="visible" placement="top" :width="160" :aria-hidden="!visible">
    <p>你确定要删除吗?</p>
    <div style="text-align: right; margin: 0">
      <el-button size="small" text @click="visible = false">取消</el-button>
      <el-button size="small" type="primary" @click="handleDeleteClick">
        确定
      </el-button>
    </div>
    <template #reference>
      <div @click="visible = true" class="iconfont">&#xe630;</div>
    </template>
  </el-popover>
</template>

<style lang="less" scoped>
</style>